<template>
  <div class="item" style="height: 100% ; width: 100%">
    <div id="Scatter" :style="{ width: '100%', height: '100%' ,}"></div>
  </div>
</template>

<script>
import request from "@/util/request.js";
import * as echarts from "echarts";
export default {
  name: "Scatter",
  // components: {Pie,EDigitalFlop, Map_1, EFullScreenContainer},
  data(){
    return{
      chartInstance: null,
      echart:echarts,
      option:{},
      womanHighWight:[],
      manHighWight:[],
    }
  },
  mounted() {
    this.initChart();
    this.getData();
    this.getPersonDataList()
  },
  watch: {
    data() {
      this.getData();
    }
  },
  methods:{
    initChart() {
      console.log("initChart")
      this.chartInstance = this.echart.init(document.getElementById("Scatter"),);
    },
    async getData() {
      console.log("getData")
      await this.updateData();
    },

    getPersonDataList(){
      request.get("/info_account/getWomanHighWight").then(res=>{
        this.womanHighWight.push(...res.data.data)
      })
      request.get("/info_account/getManHighWight").then(res=>{
        this.manHighWight.push(...res.data.data)
        this.updateData()
      })
    },

    updateData(){
      this.option={
        title: {
          text: '男生女生升高体重分布图',
          left: 'center'
        },
        grid: {
          left: '3%',
          right: '7%',
          bottom: '7%',
          containLabel: true
        },
        tooltip: {
          // trigger: 'axis',
          showDelay: 0,
          formatter: function (params) {
            if (params.value.length > 1) {
              return (
                  params.seriesName +
                  ' :<br/>' +
                  params.value[0] +
                  'cm ' +
                  params.value[1] +
                  'kg '
              );
            } else {
              return (
                  params.seriesName +
                  ' :<br/>' +
                  params.name +
                  ' : ' +
                  params.value +
                  'kg '
              );
            }
          },
          axisPointer: {
            show: true,
            type: 'cross',
            lineStyle: {
              type: 'dashed',
              width: 1
            }
          }
        },
        toolbox: {
          feature: {
            dataZoom: {},
            brush: {
              type: ['rect', 'polygon', 'clear']
            }
          }
        },
        brush: {},
        legend: {
          data: ['Female', 'Male'],
          left: 'center',
          bottom: 10
        },
        xAxis: [
          {
            type: 'value',
            scale: true,
            axisLabel: {
              formatter: '{value} cm'
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            axisLabel: {
              formatter: '{value} kg'
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '女',
            type: 'scatter',
            emphasis: {
              focus: 'series'
            },
            // prettier-ignore
            data: this.womanHighWight,
            markArea: {
              silent: true,
              itemStyle: {
                color: 'transparent',
                borderWidth: 1,
                borderType: 'dashed'
              },
              data: [
                [
                  {
                    name: '女性数据范围',
                    xAxis: 'min',
                    yAxis: 'min'
                  },
                  {
                    xAxis: 'max',
                    yAxis: 'max'
                  }
                ]
              ]
            },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              lineStyle: {
                type: 'solid'
              },
              data: [{ type: 'average', name: 'AVG' }, { xAxis: 160 }]
            }
          },
          {
            name: '男',
            type: 'scatter',
            emphasis: {
              focus: 'series'
            },
            // prettier-ignore
            data:this.manHighWight,
            markArea: {
              silent: true,
              itemStyle: {
                color: 'transparent',
                borderWidth: 1,
                borderType: 'dashed'
              },
              data: [
                [
                  {
                    name: '男性数据范围',
                    xAxis: 'min',
                    yAxis: 'min'
                  },
                  {
                    xAxis: 'max',
                    yAxis: 'max'
                  }
                ]
              ]
            },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              lineStyle: {
                type: 'solid'
              },
              data: [{ type: 'average', name: 'Average' }, { xAxis: 170 }]
            }
          }
        ]
      };
      this.chartInstance.setOption(this.option,true)
    },

  },
};
</script>
<style scoped>

</style>